<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>手绘时钟</title>
</head>
<body onload="drawClock()">
	<h3>手绘时钟</h3>
	<hr/>
	<canvas id="mycanvas" width="300" height="300" style="border:1px solid"></canvas>
	<script>
		var c=document.getElementById("mycanvas");
		var ctx=c.getContext("2d");
		//绘制时钟
		function drawClock(){
			//保存画布初始绘制状态
			ctx.save();
			//清空画布
			ctx.clearRect(0,0,300,300);
			
			//设置画笔样式和位置
			//设置画布中心点为参考点
			ctx.translate(150,150);
			//以画布中心为参考点逆时针旋转90°
			ctx.rotate(Math.PI/2,true);
			//设置画笔线宽
			ctx.lineWidth=6;
			//设置画笔线条的末端为圆型
			ctx.lineCap="round";
			//绘制12个小时的刻度
			//循环12次，每次绘制一条刻度
			for(var i=0;i<12;i++){
				ctx.beginPath();
				//每次顺时针旋转30°
				ctx.rotate(Math.PI/6,false);
				//绘制线段路径
				ctx.moveTo(100,0);
				ctx.lineTo(120,0);
				//填充路径
				ctx.stroke();
			}
			//绘制60分钟对应的刻度
			ctx.lineWidth=5;
			for(i=0;i<60;i++){
				ctx.beginPath();
				ctx.moveTo(118,0);
				ctx.lineTo(120,0);
				ctx.stroke();
				ctx.rotate(Math.PI/30,false);
			}
			//获取当前时间
			var now=new Date();
			//获取当前第几秒
			var s=now.getSeconds();
			//获取当前第几分钟
			var m=now.getMinutes();
			//获取当前第几小时
			var h=now.getHours();
			//将小时换算成12小时制的数值
			if(h>12){
				h-=12;
			}
			//绘制时针
			//保存当前状态
			ctx.save();
			//旋转角度
			ctx.rotate(h*(Math.PI/6)+m*(Math.PI/360)+s*(Math.PI/21600));
			//设置时针样式
			ctx.lineWidth=12;
			//开始绘制时针路径
			ctx.beginPath();
			ctx.moveTo(-80,0);
			ctx.lineTo(20,0);
			//描绘路径
			ctx.stroke();
			//恢复之前的路径
			ctx.restore();
			//绘制分针
			//保存当前绘图状态
			ctx.save();
			//旋转角度
			ctx.rotate((Math.PI/30)*m+(Math.PI/1800)*s);
			//设置分针样式
			ctx.lineWidth=8;
			//开始绘制分针路径
			ctx.beginPath();
			ctx.moveTo(-120,0);
			ctx.lineTo(20,0);
			//描边路径
			ctx.stroke();
			//恢复之前的绘图样式
			ctx.restore();

			//绘制秒针
			//保存当前绘图状态
			ctx.save();
			//旋转角度
			ctx.rotate((Math.PI/30)*s);
			//设置填充颜色为红色
			ctx.strokeStyle="red";
			//设置分针样式
			ctx.lineWidth=6;
			//开始绘制秒针路径
			ctx.beginPath();
			ctx.moveTo(-30,0);
			ctx.lineTo(120,0);
			//描边路径
			ctx.stroke();
			//设置填充颜色为红色
			ctx.fillStyle="red";
			//绘制画布中心园的圆心
			ctx.beginPath();
			ctx.arc(0,0,10,0,Math.PI*2,true);
			//填充圆心颜色为红色
			ctx.fill();
			//恢复之前的绘图样式
			ctx.restore();

			//绘制表盘
			//设置样式
			ctx.lineWidth=12;
			ctx.strokeStyle="green";
			//开始绘制变盘路径
			ctx.beginPath();
			ctx.arc(0,0,140,0,Math.PI*2,true);
			//描绘路径
			ctx.stroke();
			//恢复最开始的位置
			ctx.restore();
		}
		setInterval("drawClock()",1000);
	</script>
</body>
</html>